.neo-dateselector {
    background-color: v(dateselector-background-color);
    color           : v(dateselector-color);
    display         : flex;
    flex-direction  : column;
    font-size       : 16px; // todo: em-based once table headers are em based
    font-weight     : 400;
    overflow        : hidden;
    user-select     : none;

    &:focus {
        outline: 0;
    }

    .neo-relative {
        height  : 100%;
        overflow: hidden;
        position: relative;
        width   : 100%;
    }

    .neo-relative-header {
        overflow: hidden;
        position: relative;
    }

    .neo-animation-wrapper {
        display    : flex;
        transition : transform 300ms cubic-bezier(0.47, 0, 0.745, 0.715);
        will-change: transform;
    }

    .neo-animation-wrapper-header {
        display       : flex;
        flex-direction: column;
        transition    : transform 300ms cubic-bezier(0.47, 0, 0.745, 0.715);
        will-change   : transform;
    }

    &.neo-hide-inner-borders {
        .neo-dateselector-content {
            .neo-row {
                border: none !important;

                .neo-cell {
                    border: none !important;
                }
            }
        }
    }

    .neo-dateselector-content {
        border        : 1px solid v(dateselector-border-color);
        border-top    : v(dateselector-content-border-top);
        display       : flex;
        flex          : 1;
        flex-direction: column;
        font-size     : 12px;

        .neo-row {
            border-bottom: 1px solid v(dateselector-border-color);
            display      : flex;
            flex         : 1;

            &.neo-header-row {
                border-bottom: v(dateselector-header-cell-border-bottom) !important;
                flex         : none;
                height       : 30px;

                .neo-cell {
                    background-color: v(dateselector-header-cell-background-color);
                    color           : v(dateselector-header-cell-color);
                    cursor          : default;
                    pointer-events  : none;
                }
            }

            &:last-child {
                border-bottom: 0;
            }

            .neo-cell {
                align-items     : center;
                background-color: v(dateselector-cell-background-color);
                border-right    : 1px solid v(dateselector-border-color);
                color           : v(dateselector-cell-color);
                cursor          : pointer;
                display         : flex;
                flex            : 1;
                padding         : 2px;
                justify-content : center;

                &:focus {
                    outline: 0;
                }

                &:last-child {
                    border-right: 0;
                }

                &.neo-disabled {
                    background-color: v(dateselector-cell-background-color-disabled);
                    color           : v(dateselector-cell-color-disabled);
                    opacity         : v(dateselector-cell-opacity-disabled);
                }

                &.neo-disabled,
                &.neo-selected {
                    cursor        : default;
                    pointer-events: none;
                }

                &.neo-selected {
                    .neo-cell-content {
                        background-color: v(dateselector-cell-today-border-color);
                        border          : 1px solid v(dateselector-header-cell-background-color);
                        border-radius   : 50%;
                        color           : v(dateselector-cell-color-selected);

                        &:before {
                            content    : '';
                            display    : inline-block;
                            padding-top: 100%;
                        }
                    }
                }

                .neo-cell-content {
                    align-items    : center;
                    display        : flex;
                    flex-basis     : 0.1px;
                    flex-grow      : 0.2;
                    justify-content: center;
                    min-height     : 22px;
                    min-width      : 22px;
                    pointer-events : none;

                    &.neo-today {
                        border       : 1px solid v(dateselector-cell-today-border-color);
                        border-radius: 50%;
                    }
                }
            }
        }
    }

    .neo-dateselector-header {
        background-color: v(dateselector-header-background-color);
        border          : 1px solid v(dateselector-border-color);
        border-bottom   : v(dateselector-header-border-bottom);
        display         : flex;
        min-height      : 30px;

        .neo-center-region {
            align-items    : center;
            display        : flex;
            flex           : 1 1 auto;
            justify-content: center;

            .neo-month-text {
                color      : v(dateselector-header-month-text-color);
                font-weight: bold;
                width      : 33px;
            }

            .neo-year-text {
                color : v(dateselector-header-year-text-color);
                height: 1em;
            }
        }

        .neo-nav-button {
            align-items     : center;
            background-color: v(dateselector-nav-button-background-color);
            cursor          : pointer;
            display         : flex;
            justify-content : center;
            width           : 30px;

            &:before {
                color      : v(dateselector-nav-button-color);
                font-family: "Font Awesome 5 Free";
                font-size  : 18px;
                font-weight: 900;
                transition : color 150ms cubic-bezier(0.4, 0, 0.2, 1);
            }

            &:hover {
                &:before {
                    color: v(dateselector-nav-button-color-hover);
                }
            }
        }

        .neo-next-button {
            border-left: v(dateselector-nav-button-inner-border);

            &:before {
                content: "\f138";
            }
        }

        .neo-prev-button {
            border-right: v(dateselector-nav-button-inner-border);

            &:before {
                content: "\f137";
            }
        }
    }
}